<template>
	<view class="forget">
		<!-- 	<BackTabBar title="忘记密码" /> -->
		<view class="formBox">
			<view class="login_from_input">
				<view class="login_from_name">手机号</view>
				<view class="login_from_fun"><input v-model="phone" type="text" placeholder="请输入手机号码"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">验证码</view>
				<view class="login_from_fun">
					<input v-model="mscode" style="width: 40%; text-align: left" type="digit" maxlength="6"
						placeholder="验证码">
					<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#d1100b'}"
						@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
				</view>
			</view>


			<view class="login_from_input">
				<view class="login_from_name">新的密码</view>
				<view class="login_from_fun">
					<input placeholder="请输入新的密码" type="password" name="input" v-model="newPassword" />
				</view>
			</view>
			<view class="login_from_input">
				<view class="login_from_name">确认密码</view>
				<view class="login_from_fun">
					<input placeholder="请确认新的密码" type="password" name="input" v-model="confirmPassword" />
				</view>
			</view>
			<view class="login_from_dl"><button class="button" style="font-weight: 600; background-color:#D1100B;"
					@tap="doChangePwd()">确 认 修 改</button></view>
		</view>
	</view>
	</view>
</template>

<script>
	const reg = /^1[345789]\d{9}$/; // 手机号正则
	// import BackTabBar from '@/components/BackTabBar.vue'
	export default {
		components: {
			// BackTabBar
		},
		data() {
			return {
				phone: '',
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				mscode: '',
				newPassword: '',
				confirmPassword: '',
			}
		},
		methods: {
			async Qzyzm() {
				if (this.QzyzmStare == false) {
					console.log(this.phone);
					if (!reg.test(this.phone)) return uni.showToast({
						icon: 'none',
						title: '请检查您的手机号是否输入正确'
					})
					let result = await this.$http('Base_Manage/Home/ValidateVIPUserPhone?phone=' + this
						.phone)
					if (result.Success && result.Data) return uni.showToast({
						icon: 'none',
						title: '当前手机号未注册'
					})
					var num = 60;
					this.$http('Base_Manage/Base_SMSConfig/GetTemplateCodeByCode?code=' + 'ZYT_VIPUser_ResetPassWord')
						.then(resData => {
							if (resData.Success) {
								this.$http("Base_Manage/Home/GetShortMessage?Phone=" + this.phone +
										"&TemplateCode=" + resData.Data)
									.then(res => {
										if (res.Success) {
											uni.showToast({
												icon: 'none',
												title: '短信发送成功'
											})
											this.Qztime = '60';
											this.Qztext = 's后获取';
											this.QzyzmStare = true;
											var interval = setInterval(() => {
												--this.Qztime
											}, 1000)
											setTimeout(() => {
												clearInterval(interval)
												this.Qztext = '获取验证码'
												this.Qztime = ''
												this.QzyzmStare = false
											}, 60000)
										} else {
											console.log('失败')
											uni.showToast({
												icon: 'none',
												title: res.Msg
											})
										}
									})
							} else {
								uni.showToast({
									icon: 'none',
									title: resData.Msg
								})
							}
						})

				}
			},


			async doChangePwd() {
				this.$http('Base_Manage/Home/UserChangePassword', {
					Phone: this.phone,
					NewPassword: this.confirmPassword,
					SmsCode: this.mscode,
				}).then(res => {
					if (res.Success) {
						if (!this.newPassword) return uni.showToast({
							icon: 'none',
							title: '请检查您是否输入密码'
						})
						if (this.newPassword !== this.confirmPassword) return uni.showToast({
							icon: 'none',
							title: '请检查您两次输入的密码是否一致'
						})
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						// uni.setStorageSync('userName', this.phone)
						// uni.setStorageSync('password', this.confirmPassword)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})


			}

		}
	}
</script>

<style lang="scss" scoped>
	.forget {
		height: 100%;

		.formBox {
			padding: 0 40rpx;
		}
	}


	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.login_from_dl {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #66afff;
		color: #fff;
		border-radius: 50px;
	}
</style>